<template>
  <div class="myt">

<div class="titie">
     <!-- //+题组管理/基础题库 -->
<span style="font-size: 12px; color: pink;">说明：目前支持学科和关键字条件筛选</span>
<el-button type="success" class="suc" plain @click="addpathentry">新增试题</el-button>
   <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-position="labelPosition" ref="choicForm">
    <el-form-item label="学科">
    <el-select v-model="formInline.subjectName" placeholder="请选择">
      <el-option :label="item.subjectName" value="shanghai" v-for="item in subjectsList" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="二级目录">
    <el-select v-model="formInline.empyt" placeholder="请选择">

    </el-select>
  </el-form-item>
  <el-form-item label="标签">
    <el-select v-model="formInline.empyt" placeholder="请选择">
    </el-select>
  </el-form-item>
  <el-form-item label="关键字">
    <el-input v-model="formInline.keyword" placeholder=""></el-input>
  </el-form-item>
   <el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="(item,index) in questionType" :key="index"></el-option>

    </el-select>
  </el-form-item>
     <el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="(item,index) in difficulty" :key="index"></el-option>

    </el-select>
  </el-form-item>
  <el-form-item label="方向">

    <el-select v-model="formInline.direction" placeholder="请选择">
      <el-option :label="item" :value="item" v-for="(item,index) in direction" :key="index"></el-option>
    </el-select>
  </el-form-item>
     <el-form-item label="录入人">
    <el-select v-model="formInline.creatorID" placeholder="请选择">
      <el-option :label="item.username" :value="item.id" v-for="item in username" :key="item.id"></el-option>

    </el-select>
  </el-form-item>
   <el-form-item label="题目备注">
    <el-input v-model="formInline.user" placeholder=""></el-input>
  </el-form-item>
   <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName" placeholder=""></el-input>
  </el-form-item>
    <el-form-item label="城市" class="city">
    <el-select v-model="formInline.provinces" placeholder="请选择" >
      <el-option :label="item" :value="item" v-for="(item,index) in provinces()" :key="index"></el-option>
    </el-select>
    <el-select v-model="formInline.citys" placeholder="请选择" >
      <el-option :label="item" :value="item" v-for="(item,index) in citys" :key="index"></el-option>
    </el-select>
  </el-form-item>

 <div >
    <el-form-item>
     <el-button  @click="doClear">清除</el-button>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
 </div>
</el-form>
<p class="ps"><i class="el-icon-info"></i>试题一共{{this.total}}条</p>
<div>
  <el-card style="margin-top: 10px">
        <el-table border :data="tableData">

          <el-table-column label="试题编号">
            <template #default="scoped"> {{ scoped.row.number }}</template>
          </el-table-column>
          <el-table-column label="学科">
            <template #default="scoped"> {{ scoped.row.subject }}</template>
          </el-table-column>
           <el-table-column label="目录">
            <template #default="scoped"> {{ scoped.row.catalog }}</template>
          </el-table-column>
          <el-table-column label="题干">
            <template #default="scoped">
        {{formatEmployment(scoped.row.questionType)}}
        </template>
          </el-table-column>
           <el-table-column label="题型">
            <template #default="scoped">
                <div v-html="scoped.row.question">

                </div>
               </template>
          </el-table-column>
          <el-table-column label="录入时间">
            <template #default="scoped"> {{ scoped.row.addDate }}</template>
          </el-table-column>
           <el-table-column label="难度">
            <template #default="scoped" >
                <!-- <div v-html="scoped.row.difficulty "></div>
                 -->
                 {{fordifficulty(scoped.row.difficulty)}}
            </template>
          </el-table-column>
           <el-table-column label="录入人">
            <template #default="scoped"> {{ scoped.row.creator }}</template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="scope">
              <el-button type="text" size="small"  @click=" trundia(scope.row.id) ">查看</el-button>

<el-dialog
  title="题目预览"
  :visible="dialogVisible"
:modal-append-to-body="false"
@close="dialogVisible=false"

  >
<el-row :gutter="20"  >

  <el-col :span="6"><div class="grid-content bg-purple">【题型】：  {{Dialoginput.questionType===1?'单选':(Dialoginput.questionType===2?'多选':'简答') }}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【编号】：{{Dialoginput.id}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【难度】：{{Dialoginput.difficulty===1?'简单':(Dialoginput.difficulty===2?'一般':'困难')}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【标签】：{{Dialoginput.directoryName}}</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">【学科】：{{Dialoginput.subjectName}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【目录】：{{Dialoginput.catalog}}</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{Dialoginput.direction}}</div></el-col>

  <el-col :span="24"><div class="grid-content bg-purple">【题干】：{{Dialoginput.subject}}</div></el-col>
  <el-col :span="24"><div class="grid-content bg-purple"><span style="color:blue">{{Dialoginput.question}} </span></div></el-col>
     <el-col :span="24"><div class="grid-content bg-purple">单选题 选项:(以下选中的选项为正确答案)</div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple">  <el-radio  v-model="radio" :label="3">1</el-radio></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple">  <el-radio  v-model="radio" :label="6">2</el-radio></div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple">  <el-radio  v-model="radio"  :label="9">3</el-radio></div></el-col>
     <el-col :span="6"><div class="grid-content bg-purple">  <el-radio  v-model="radio"  :label="12">4</el-radio></div></el-col>
 <el-col :span="24"><div class="grid-content bg-purple">【参考答案】：
  <el-button type="warning" >视频答案预览</el-button></div></el-col>

  <el-col :span="24"><div class="grid-content bg-purple">【答案题型】：{{Dialoginput.remarks}}</div></el-col>
    <el-col :span="24"><div class="grid-content bg-purple">【题目备注】：{{Dialoginput.remarks}}</div></el-col>

</el-row>

  <!-- <span>这是一段信息</span> -->
  <span >
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
              <el-button type="text" size="small" @click="pathentry(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" @click="delStaff(scope.row.id)">删除</el-button>
             <el-button type="text" size="small" @click="addselect(scope.row.id)">加入精选</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
             :page-size='5'
              @current-change="pageChange"
          />
        </div>
      </el-card>

</div>

 <div>
 </div>
 </div>
  </div>
</template>

<script>
import { list as userlist } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list, detail, choice, choiceAdd } from '../../api/hmmm/questions'
import { list as sublist } from '@/api/hmmm/subjects.js'
// import { questionAdd } from '@/api/hmmm/questions-new.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
export default {
  data () {
    return {
      labelPosition: 'right',
      radio: '2',
      total: 0,
      page: { // 页面
        page: 1,
        size: 5
      },
      list: [],
      tableData: [], // 学科列表数据
      Dialoginput: {}, // 弹框数据
      formInline: { // 有些是复制过来
        empyt: '',
        subjectName: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        provinces: '',
        citys: ''
      },
      subjectsList: [],
      difficulty: difficulty,
      questionType,
      direction,
      username: [],
      provinces,
      citys: [], // 城市
      dialogVisible: false// 弹框
    }
  },
  mounted () {
    this.getlist()
    this.getuserList()
    this.getSubject()
  },

  methods: {
    addpathentry () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    onSubmit () {
      console.log('submit!')
      choice({ page: 1, pagesize: 10, subjectID: this.formInline.subjectid, keyword: this.formInline.keyword }).then(res => {
        const dataRequest = { subjectID: this.formInline.subjectid, keyword: this.formInline.keyword }
        this.$emit('changenewtableList', [res.data.items, dataRequest])
        console.log(res.data.items)
      })
    },
    // 清除表单的操作
    doClear () {
      this.formInline = {
        empyt: '',
        subjectName: '',
        keyword: '',
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        provinces: '',
        citys: ''
      }
    },
    async trundia (id) {
      this.dialogVisible = true
      //   console.log(id)
      const res = await detail({ id })
      console.log(res)
      this.Dialoginput = res.data
    },

    async getlist () {
      const res = await list({
        pagesize: 5,
        page: this.page.page
      })

      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 获取用户列表
    getuserList () {
      userlist({ page: 1, pagesize: 100000 }).then(res => {
        this.username = res.data.list
        // console.log(res)
      })
    },
    // 获取学科列表
    getSubject () {
      sublist({ page: 1, pagesize: 10000 }).then(res => {
        this.subjectsList = res.data.items
        console.log(this.subjectsList)
      })
    },
    formatEmployment (val) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'

      }
      return map[val]
    },
    fordifficulty (val) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'

      }
      return map[val]
    },
    pageChange (page) {
      console.log(page)
      this.page.page = page
      this.getlist()
    },
    delStaff (id) {
      this.$confirm('是否删除员工?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

      })
    },
    addselect (id) {
      this.$confirm('是否添加到精选题库?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await choiceAdd({ id: id, choiceState: '1' })
        console.log(res)

        this.getlist()

        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }).catch(() => {

      })
    },

    pathentry (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    }

  },
  watch: {
    formInline: {
      deep: true,
      handler (val) {
        if (val.provinces) {
          this.citys = citys(val.provinces)
        }
      }
    }

  }

}
</script>

<style scoped lang='scss'>
.myt {
  padding: 20px 20px 0 20px;
}
.suc{
    margin-top: 15px;
    margin-left: 900px;
}
.el-row {
    margin-bottom: 20px;

  }
  .el-col {
    margin-top: 20px;
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #fff;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .titie {

   background-color: #fff;
   /* height: 1200px; */

   }
   .ps {
       width: 100%;
          background-color: #f4f4f5;
          height: 30px;
          padding: 10px;
   }
.city .el-select {
  width: 102px;

}
.el-form{
  display: flex;
  flex-flow:row wrap;
  /* // justify-content: center; */
  align-items: center;

justify-content: space-between;

}
.el-form-item {
  width: 280px;
  display: flex;
  justify-content: flex-end;
}
.el-select{
  width: 206px;
}

.myform{
  margin-top: 10px;
  padding: 0 20px;
}
</style>
